<template>
	<div class="printpage">
      <div class=" orderContent">
    
      <h1 class="title">优粮城</h1>
      <!-- 订单信息 -->
      <div>
        <table class="mainInfo">
          <tr >
            <td colspan="2"> 
              <!-- <div> 订单号：6R69719051110597008{{vanOrder.orderNumber}} </div> -->
              <div> 订单号:{{vanOrder.orderNumber}} </div>
              </td>
            
          </tr>
          <tr>
              <td colspan="2">
              <div>时&nbsp;&nbsp;&nbsp;&nbsp;间:{{vanOrder.createAtStr}}</div>
           </td>
          </tr>
          <tr>
            <td>
              <div>业务员:{{staff.name}}</div>
            </td>
            <td class="infoTableRight">
              <div> 电话:{{staff.phoneNo}}  </div>
            </td>
          </tr>
        </table>
        
      </div>
    <!-- 销售明细 -->
    <div v-if="saleItem != null && saleItem.length > 0" class="tableDiv">
      <table  class="table">
        <thead>
          <tr>
            <td>名称</td>
            <td class="numCols">单价</td>
            <td class="numCols">数量</td>
            <td class="numCols">金额</td>
          </tr>
        </thead>
        <tr v-for="(item,index) in saleItem" :key="index">
          <td>{{item.name}}{{item.spec}}</td>
          <td class="numCols">{{item.salePrice}}</td>
          <td class="numCols">X{{item.num}}</td>
          <td class="numCols">{{item.amount}}</td>
        </tr>
      </table>
    </div>
    
    <!-- 赠送明细 -->
    <div v-if="giftItem != null && giftItem.length > 0" class="tableDiv">
       <table  class="table">
        <thead>
          <tr>
            <td>名称</td>
            <td class="numCols">数量</td>
            <td class="saleType">方式</td>
          </tr>
        </thead>
        <tr v-for="(item,index) in giftItem" :key="index" >
          <td>{{item.name}}{{item.spec}}</td>
          <td class="numCols">X{{item.num}}</td>
          <td class="saleType">{{giftGiveTypes[item.saleType]}}</td>
        </tr>
      </table>
    </div>
     <!-- 底部 -->
     <div class="tableDiv">
       <table class="table">
         <tr>
           <td>支付金额(元)： {{vanOrder.amount}}</td>
         </tr>
         
       </table>
       <div class="bottomInfo">
       <span>~ 谢谢惠顾 ~</span>
       </div>
     </div>
     
     </div>
     
	</div>
</template>

<script>
// @ is an alias to /src
import { Stepper } from "vant";
// import ble  from "cordova-plugin-ble-central";
// import bluetoothle from "cordova-plugin-bluetoothle";

import baseUtil from "@/utils/baseUtil";
import { orderItem } from "@/api/vanProducts";
export default {
  name: "orderPrint",
  components: { [Stepper.name]: Stepper },
  data() {
    return {
      orderNumber: "",
      vanOrder:  {
            "orderNumber": "6R69719053016928236",
            "amount": 59.86,
            "paymentType": "ALI_PC_DIRECT",
            "status": "PAID",
            "createAtStr": "2019-05-30 16:25:02",
            "createAt": "May 30, 2019 4:25:02 PM",
            "id": 1036
        },
      staff: {
            "name": "vanSelling-1",
            "loginName": "van1",
            "phoneNo": "13012345678",
            "id": 105
        },
      saleItem:  [
            {
                "amount": 2.96,
                "spec": "1L",
                "unit": "瓶",
                "num": 1,
                "imageUrl": "https://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20180910/WqokyKhNv7LYGRbM.jpg?x-oss-process=image/resize,w_150",
                "saleType": "SALE",
                "name": "康师傅冰红茶(柠檬口味)",
                "orderNumber": "6R69719053016928236",
                "salePrice": 2.96
            },
            {
                "amount": 2.17,
                "spec": "500ml",
                "unit": "瓶",
                "num": 1,
                "imageUrl": "https://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20180226/KyLzbbhtyNUr2xmC.jpg?x-oss-process=image/resize,m_fill,w_200",
                "saleType": "SALE",
                "name": "康师傅冰红茶(柠檬口味)",
                "orderNumber": "6R69719053016928236",
                "salePrice": 2.17
            },
            {
                "amount": 0.44,
                "spec": "550ml",
                "unit": "瓶",
                "num": 1,
                "imageUrl": "https://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20160918/TjZTrLsMjPs2YFeX.jpg?x-oss-process=image/resize,m_fill,w_150",
                "saleType": "SALE",
                "name": "康师傅包装饮用水",
                "orderNumber": "6R69719053016928236",
                "salePrice": 0.44
            },
            {
                "amount": 3.75,
                "spec": "红烧牛肉面145g",
                "unit": "桶",
                "num": 1,
                "imageUrl": "https://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20180913/EDF81K7s3H40WnCV.jpg?x-oss-process=image/resize,w_200",
                "saleType": "SALE",
                "name": "康师傅方便面-大食桶",
                "orderNumber": "6R69719053016928236",
                "salePrice": 3.75
            },
            {
                "amount": 2.42,
                "spec": "香辣牛肉面144g",
                "unit": "袋",
                "num": 1,
                "saleType": "SALE",
                "name": "康师傅方便面-大食袋",
                "orderNumber": "6R69719053016928236",
                "salePrice": 2.42
            },
            {
                "amount": 2.42,
                "spec": "红烧牛肉面145g",
                "unit": "袋",
                "num": 1,
                "saleType": "SALE",
                "name": "康师傅方便面-大食袋",
                "orderNumber": "6R69719053016928236",
                "salePrice": 2.42
            },
            {
                "amount": 1,
                "spec": "红烧牛肉面93g",
                "unit": "袋",
                "num": 1,
                "imageUrl": "https://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20190411/hnFcdqStekutdqMu.jpg?x-oss-process=image/resize,w_200",
                "saleType": "SALE",
                "name": "白象-精炖袋24+1",
                "orderNumber": "6R69719053016928236",
                "salePrice": 1
            },
            {
                "amount": 1,
                "spec": "老坛酸菜牛肉面102g",
                "unit": "袋",
                "num": 1,
                "imageUrl": "https://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20190412/M0aRFfi5JaoZuboQ.jpg?x-oss-process=image/resize,w_200",
                "saleType": "SALE",
                "name": "白象-精炖袋24+1",
                "orderNumber": "6R69719053016928236",
                "salePrice": 1
            },
            {
                "amount": 1,
                "spec": "原汁猪骨94g",
                "unit": "袋",
                "num": 1,
                "imageUrl": "https://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20190424/EGMFK2n2gR6Y6rts.jpg?x-oss-process=image/resize,w_150",
                "saleType": "SALE",
                "name": "白象-精炖袋24+1",
                "orderNumber": "6R69719053016928236",
                "salePrice": 1
            },
            {
                "amount": 1,
                "spec": "香辣猪骨94g",
                "unit": "袋",
                "num": 1,
                "imageUrl": "https://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20190424/7Nn1Zx99WwArih0i.jpg?x-oss-process=image/resize,w_150",
                "saleType": "SALE",
                "name": "白象-精炖袋24+1",
                "orderNumber": "6R69719053016928236",
                "salePrice": 1
            },
            {
                "amount": 3.42,
                "spec": "红烧牛肉面",
                "unit": "桶",
                "num": 1,
                "imageUrl": "https://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20160911/fUuC5r2b3g0V7o6g.jpg?x-oss-process=image/resize,m_fill,w_150",
                "saleType": "SALE",
                "name": "康师傅方便面-桶装",
                "orderNumber": "6R69719053016928236",
                "salePrice": 3.42
            },
            {
                "amount": 3.33,
                "spec": "卤香牛肉面107g",
                "unit": "桶",
                "num": 1,
                "saleType": "SALE",
                "name": "康师傅方便面-桶装",
                "orderNumber": "6R69719053016928236",
                "salePrice": 3.33
            },
            {
                "amount": 1.25,
                "spec": "香辣牛肉面109g",
                "unit": "袋",
                "num": 1,
                "saleType": "SALE",
                "name": "康师傅方便面-福满多24袋装",
                "orderNumber": "6R69719053016928236",
                "salePrice": 1.25
            },
            {
                "amount": 1.25,
                "spec": "海贝鲜虾面108g",
                "unit": "袋",
                "num": 1,
                "saleType": "SALE",
                "name": "康师傅方便面-福满多24袋装",
                "orderNumber": "6R69719053016928236",
                "salePrice": 1.25
            },
            {
                "amount": 2.08,
                "spec": "红烧牛肉面",
                "unit": "袋",
                "num": 1,
                "imageUrl": "https://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20160911/3atJPdRnC4p1scPz.jpg?x-oss-process=image/resize,m_fill,w_150",
                "saleType": "SALE",
                "name": "康师傅方便面-袋装",
                "orderNumber": "6R69719053016928236",
                "salePrice": 2.08
            },
            {
                "amount": 2.04,
                "spec": "香辣牛肉面",
                "unit": "袋",
                "num": 1,
                "imageUrl": "https://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20170213/N33iq8g9MD0bPtoV.jpg?x-oss-process=image/resize,m_fill,w_200",
                "saleType": "SALE",
                "name": "康师傅方便面-袋装",
                "orderNumber": "6R69719053016928236",
                "salePrice": 2.04
            },
            {
                "amount": 3,
                "spec": "老坛酸菜牛肉面",
                "unit": "袋",
                "num": 1,
                "imageUrl": "https://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20171030/Nug7U2L6WVRjrR6V.jpg?x-oss-process=image/resize,m_fill,w_200",
                "saleType": "SALE",
                "name": "康师傅方便面-袋装",
                "orderNumber": "6R69719053016928236",
                "salePrice": 3
            },
            {
                "amount": 3,
                "spec": "西红柿鸡蛋打卤面",
                "unit": "袋",
                "num": 1,
                "imageUrl": "https://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20161018/358PwnD58mpJeBRZ.jpg?x-oss-process=image/resize,m_fill,w_200",
                "saleType": "SALE",
                "name": "康师傅方便面-袋装",
                "orderNumber": "6R69719053016928236",
                "salePrice": 3
            },
            {
                "amount": 3,
                "spec": "小鸡炖蘑菇面",
                "unit": "袋",
                "num": 1,
                "imageUrl": "https://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20161018/oD6ecgc3QcY5MkD7.jpg?x-oss-process=image/resize,m_fill,w_200",
                "saleType": "SALE",
                "name": "康师傅方便面-袋装",
                "orderNumber": "6R69719053016928236",
                "salePrice": 3
            },
            {
                "amount": 2.08,
                "spec": "鲜虾鱼板面",
                "unit": "袋",
                "num": 1,
                "imageUrl": "https://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20161018/7S4sXNAsxUTBkux9.jpg?x-oss-process=image/resize,m_fill,w_200",
                "saleType": "SALE",
                "name": "康师傅方便面-袋装",
                "orderNumber": "6R69719053016928236",
                "salePrice": 2.08
            },
            {
                "amount": 1.15,
                "spec": "红烧牛肉面109g",
                "unit": "袋",
                "num": 1,
                "saleType": "SALE",
                "name": "康师傅福满多26袋装",
                "orderNumber": "6R69719053016928236",
                "salePrice": 1.15
            },
            {
                "amount": 2,
                "spec": "90g",
                "unit": "支",
                "num": 1,
                "imageUrl": "https://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20170412/Z9uWD4JatmsmvoDC.jpg?x-oss-process=image/resize,m_fill,w_200",
                "saleType": "SALE",
                "name": "金锣-90g加钙特香王",
                "orderNumber": "6R69719053016928236",
                "salePrice": 2
            },
            {
                "amount": 8.5,
                "spec": "340g(34g*10支)",
                "unit": "袋",
                "num": 1,
                "imageUrl": "https://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20160911/A6Uq7X3CijVa3tP1.jpg?x-oss-process=image/resize,m_fill,w_150",
                "saleType": "SALE",
                "name": "金锣-加钙金锣王特级火腿肠",
                "orderNumber": "6R69719053016928236",
                "salePrice": 8.5
            },
            {
                "amount": 5.6,
                "spec": "320g(32g*10支)",
                "unit": "袋",
                "num": 1,
                "imageUrl": "https://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20161129/4kLJDQ0qNUueMEC5.jpg?x-oss-process=image/resize,m_fill,w_200",
                "saleType": "SALE",
                "name": "金锣-大众王优级火腿肠",
                "orderNumber": "6R69719053016928236",
                "salePrice": 5.6
            }
        ],
      giftItem:  [
            {
                "amount": 0,
                "spec": "550ml",
                "unit": "瓶",
                "num": 1,
                "imageUrl": "http://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20160912/zUDWTs2nE02fSTBK.jpg?x-oss-process=image/resize,m_fill,w_150",
                "saleType": "GIVE",
                "name": "康师傅冰红茶(柠檬口味)",
                "orderNumber": "6R69719053016928236",
                "salePrice": 0
            },
            {
                "amount": 0,
                "spec": "300g(30g*10支)",
                "unit": "袋",
                "num": 1,
                "imageUrl": "http://buhaoba.oss-cn-hangzhou.aliyuncs.com/u/20161129/trFkTZDu4HFL4FCw.jpg?x-oss-process=image/resize,m_fill,w_150",
                "saleType": "EXCHANGE",
                "name": "金锣-无淀粉加钙金锣王",
                "orderNumber": "6R69719053016928236",
                "salePrice": 0
            }
        ],
      giftGiveTypes: baseUtil.saleType
    };
  },
  methods: { 
  },
  mounted() {
  }
};
</script>

<style>
.printpage{
  /* width:100%; */
  height: 100%;
  overflow-y: auto;
}
.title {
  text-align: center;
  margin-top: 0.7rem;
  margin-bottom: 1rem;
}
.orderContent {
  margin: 0.75rem 0.75rem;
}
.mainInfo {
  width: 100%;
}
.tableDiv {
  border-top: 1px dashed #000;
  padding-top: 1rem;
  margin-top: 1rem;
}
.table {
  width: 100%;
}

.infoTableLeft {
  width: 168px;
}
.infoTableRight {
  text-align: right;
}
.numCols {
  width: 10%;
  text-align: right;
}
.saleType {
  width: 15%;
  text-align: right;
}
.bottomInfo {
  margin-top: 2rem;
  text-align: center;
  padding-bottom: 1rem;
}
</style>
